<template>
	<view>
		<view class="header">
			<text @click="back" class="iconfont icon-xiangzuojiantou">处方单信息</text>
		</view>
		<view class="content">
			<view class="cFirst" @click="tiaozhuan">
				<view>
					<view>用药人</view>
					<view>{{yyrArr.yyr_name}}</view>
					<view>{{yyrArr.yyr_sex}} {{yyrArr.yyr_age}}岁  {{yyrArr.yyr_tel}}</view>
				</view>
				<text class="iconfont icon-youjiantou"></text>
			</view>
			<view class="cSecond">
				<form @submit="formSubmit" @reset="formReset">
					<view class="uni-form-item uni-column">
						<view class="title title1">已确诊疾病 <text>可多选*</text></view>
						<checkbox-group name="jibing">
							<label>
								<checkbox value="原发性高血压" /><text :class="checkedarr[0]==true?'textActive':''" @click="changeChecked(0)">原发性高血压</text>
							</label>
							<label>
								<checkbox value="高血压" /><text :class="checkedarr[1]==true?'textActive':''" @click="changeChecked(1)">高血压</text>
							</label>
							<label>
								<checkbox value="心绞痛" /><text :class="checkedarr[2]==true?'textActive':''" @click="changeChecked(2)">心绞痛</text>
							</label>
						</checkbox-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">是否使用过该药品:*</view>
						<radio-group name="isUse">
							<label>
								<radio value="1" /><text>是</text>
							</label>
							<label>
								<radio value="0" /><text>否</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">有无不良反应:*</view>
						<radio-group name="fanying">
							<label>
								<radio value="1" /><text>是</text>
							</label>
							<label>
								<radio value="0" /><text>否</text>
							</label>
						</radio-group>
					</view>
					<view class="uni-btn-v">
						<button class="footerBtn" type="warn" form-type="submit">提交</button>
					</view>
				</form>
			</view>
			<view class="cThird">
				<view>补充病例信息</view>
				<view>
					<text>线下就诊的历史处方、病例或报告单</text>
					<view class="chooseimg">
						<image v-for="(item,index) in imageArr" :src="IP+item" :key="index" mode="widthFix"></image>
						<image @click="uploadImg" src="../../static/上传图片.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 站位空白 -->
		<view class="kongbai"></view>
		<!-- <view class="footer">
			<button type="warn" @click="tijiao">提交</button>
		</view> -->
	</view>
</template>

<script>
	import {reactive,toRefs,onMounted,computed} from 'vue';
	import {useStore} from 'vuex'
	import http from '../../utils/http.js';
	export default {
		setup(){
			const {state,commit,dispatch,getters} = useStore();
			let data=reactive({
				IP:computed(()=>state.IP),
				// 存放即将存入数据库的地址,图片渲染数组
				imageArr:[],
				// 用药人
				yyrArr:computed(()=>state.shopcart.yongyaoren),
				// 渲染用药人
				xuanranData:computed(()=>state.shopcart.chufangArr),
				// xuanranData:{
				// 	cf_id: '',
				// 	cf_imgsrc: "",
				// 	cf_isBuliangfanying: '',
				// 	cf_isUsedyaopin: '',
				// 	cf_isshiyong: '',
				// 	cf_yiquerenjibing: "",
				// 	cf_yonyaorenId: '',
				// 	y_bingshi: "",
				// 	y_birthtime: "",
				// 	y_chufang: "",
				// 	y_id: '',
				// 	y_imgsrc: '',
				// 	y_name: "",
				// 	y_sex: "",
				// 	y_shenfenzheng: "",
				// 	y_tel: "",
				// 	y_zhuangtai: '',
				// 	y_zhucetime: "",
				// 	yyr_age: "",
				// 	yyr_bingshi: "",
				// 	yyr_birth: "",
				// 	yyr_guanxi: "",
				// 	yyr_id: '',
				// 	yyr_isUsed: '',
				// 	yyr_name: "",
				// 	yyr_sex: "",
				// 	yyr_shengfenzheng: "",
				// 	yyr_tel: "",
				// 	yyr_yonghuId: ''
				// },
				checkedarr:[false,false,false],
				back(){
					console.log('返回')
					uni.redirectTo({
						url: '/pages/querendingdan/querendingdan'
					});
				},
				tiaozhuan(){
					console.log('跳转')
					uni.navigateTo({
						url: '/pages/yongyaorenguanli/yongyaorenguanli'
					});
				},
				// 多选按钮样式改变
				changeChecked(e){
					data.checkedarr[e]=!data.checkedarr[e]
				},
				// 提交
				formSubmit: function(e) {
					console.log(e.detail.value)
					let img=data.imageArr.join(',') || ''
					// console.log(img)
					let jibing=e.detail.value.jibing.join(',')
					// console.log(jibing)
					if(e.detail.value.isUse!=''&&jibing!=''&&e.detail.value.fanying!=''){
						// console.log(123)
						http({
							url:'/addchufangxinxi',
							method:'post',
							data:{
								yyr_id:data.yyrArr.yyr_id,
								cf_isUsedyaopin:e.detail.value.isUse,
								cf_isBuliangfanying:e.detail.value.fanying,
								cf_imgsrc:img,
								cf_yiquerenjibing:jibing
							}
						}).then((res)=>{
							// console.log(res)
							if(res.data.code==200){
								uni.showToast({
									title: '添加成功',
									duration: 1000
								});
								// 让单个添加处方按钮消失显示用药人
								state.shopcart.ischufangBtn=false
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/querendingdan/querendingdan'
									})
								},1500)
							}
						})
					}else{
						uni.showToast({
							title: '请完善信息',
							icon:'error',
							duration: 1000
						});
					}
					
				},
				// 图片上传
				uploadImg(){
					const token = uni.getStorageSync('token')
					uni.chooseImage({
						count:1,
						success:(res)=> {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: data.IP+'/getChufangtupian',
								filePath: tempFilePaths[0],
								name: 'file',
								header: {
									'token': token
								},
								// formData: {
								// 	'user': 'test'
								// },
								success: (resl) => {
									// console.log(resl.data);
									data.imageArr.push('/uploads/chufang/'+resl.data)
									// 只允许传2张图
									if(data.imageArr.length>2){
										data.imageArr.splice(0,1)
									}
								}
							});
						}
					})
				}
			})
			onMounted(()=>{
				console.log(state.shopcart.yongyaoren)
				// data.xuanranData=state.shopcart.yongyaoren
				let id=state.userID
				// 查询该用户的处方以及用药人信息
				http({
					url:'/getchufangxinxi',
					method:'post',
					data:{
						id:id
					}
				}).then((res)=>{
					let flag=1
					// console.log(res.data.data)
					if(res.data.code==200){
						commit('shopcart/getallchufangandyyrData',res.data.data)
						console.log(state.shopcart.allchufangandyyrArr)
						for (let i = 0; i < state.shopcart.allchufangandyyrArr.length; i++) {
							if(state.shopcart.allchufangandyyrArr[i].cf_yonyaorenId==state.shopcart.yongyaoren.yyr_id &&state.shopcart.allchufangandyyrArr[i].cf_isshiyong==1){
								commit('shopcart/getchufangData',state.shopcart.allchufangandyyrArr[i])
							}
						}
					}
				})	
			})
			return {...toRefs(data)}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");
	.header{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		justify-content: space-between;
		>text:nth-child(2){
			color: red;
		}
	}
	.content{
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background-color: #efefef;
	}
	.cFirst{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		view:nth-child(1){
			flex: 1;
			view:not(:first-child){
				margin-top: 20rpx;
			}
		}
	}
	.cSecond{
		margin: 20rpx 0;
		padding: 0rpx 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		background-color: white;
		.uni-form-item .title {
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
		checkbox-group{
			display: flex;
			justify-content: space-around;
			align-items: center;
			checkbox{
				display: none;
			}
			text{
				padding: 6rpx 16rpx;
				border: 1px solid #efefef;
				border-radius: 10px;
			}
			.textActive{
				background-color: #DA2222;
				color: white;
				border: 1px solid #DA2222;
			}
		}
		.uni-form-item{
			radio{
				transform: scale(0.7);
			}
		}
	}
	.footerBtn{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		border: 1px solid red;
		border-radius: 0;
	}
	.cThird{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: white;
		view{
			margin: 20rpx 0;
		}
	}
	.chooseimg{
		image{
			width: 200rpx;
		}
	}
	// .footer{
	// 	position: fixed;
	// 	bottom: 0;
	// 	width: 100%;
	// 	button{
	// 		border: 1px solid red;
	// 		border-radius: 0;
	// 	}
	// }
	.kongbai {
		height: 102rpx;
		// background-color: red;
	}
</style>
